import { Demo1Component } from './demo1/demo1.component';
import { Demo4Component } from './demo4/demo4.component';
import { Demo5Component } from './demo5/demo5.component';

export const BreadcrumbConfig = {
  location: 'Breadcrumb',
  description: '指示当前页面在系统层级结构中的路径，可按照路径返回到任意层级的页面。',
  description_en: 'Indicates the path of the current page in the system hierarchy, which can be returned to the page of any level.',
  component: [
    {
      demo: Demo1Component,
      codePath: 'showcase/breadcrumb/demo1/demo1.component',
      demoTitle: '基础',
      demoTitle_en: 'Basic',
      demoDescription: '普通用法，可以使用文本通过路由 (routerLink) 或事件函数 (onClick) 返回指定的层级页面。',
      demoDescription_en:
        'General usage. Icons、 text and icon-text can be used. Allows user return to designated level page through routerLink or onClick.',
    },
    {
      demo: Demo4Component,
      codePath: 'showcase/breadcrumb/demo4/demo4.component',
      demoTitle: '适配标题',
      demoTitle_en: 'Adaptation Title',
      demoDescription: '如果当前页面有标题，则紧靠着当前页面的标题，此时省略面包屑中的当前页面。',
      demoDescription_en:
        'If the current page has a title, the title is right below the breadcrumb, and the current page in the breadcrumb is omitted.',
    },
    {
      demo: Demo5Component,
      codePath: 'showcase/breadcrumb/demo5/demo5.component',
      demoTitle: '溢出显示',
      demoTitle_en: 'Show Overflow',
      demoDescription: '如果当前面包屑文字过长，可以通过传入width的方式溢出显示，悬浮可显示完整面包屑。',
      demoDescription_en:
        'If the current breadcrumb text is too long, it can be overflowed and displayed by passing in width, and the full breadcrumb can be displayed by suspension.',
    },
  ],
  useRule: [],
  useSuggestion: [],
  selector: 'lv-breadcrumb',
  snippet: `<lv-breadcrumb [lvItems]="\${1:items}"></lv-breadcrumb>`,
  api: [
    {
      attribute: 'lvItems',
      type: 'MenuItem[]',
      default: 'null',
      description: `面包屑定义，类型为MenuItem数组，属性如下：
      <ul>
        <li>[id: string] 项ID，具有唯一性 (必选)</li>
        <li>[label: string] 显示的名称 (必选)</li>
        <li>[tips: string] 鼠标划过时，显示的提示信息 (可选)</li>
        <li>[onClick: void] 左键单击事件的回调函数，(event) => {} (可选)</li>
        <li>[routerLink: LvRouterLinkType] 路由配置，菜单项左键单击触发，如 '/a'、['/a']、[['/a'], {queryParams: {id: 1}}] (可选)</li>
        <li>[items: MenuItem[]] 配置后生成面包屑层级的下拉菜单 (可选)</li>
        <li>[disabled: boolean] 是否禁用，默认值 false (可选)</li>
        <li>[width: string] 面包屑宽度，超过宽度溢出显示 (可选)</li>
      </ul>
      `,
      description_en: `Definition of breadcrumbs. The type is MenuItem array. Properties:
      <ul>
        <li>[id: string] Item ID, unique (required)</li>
        <li>[label: string] Displayed name (required)</li>
        <li>[tips: string] Prompt information displayed when mouse-over (optional)</li>
        <li>[icon: string] Icons displayed above name (optional) </li>
        <li>[onClick: void] Callback function for left-click event, (event) => {} (optional)</li>
        <li>[routerLink: LvRouterLinkType] Route configuration, triggered by left-click on the menu item (optional), exp：'/a'、['/a']、['/a', {queryParams: {id: 1}}]</li>
        <li>[items: MenuItem[]] Generate breadcrumbs level drop-down menu after configuration (optional)</li>
        <li>[disabled: boolean] Disable or not, default value is false (optional)</li>
        <li>[width: string] breadcrumb width, overflow display (optional)</li>
      </ul>`,
    },
    {
      attribute: 'lvFullPath',
      type: 'boolean',
      default: 'true',
      description: '全局配置，路径展示方式，前缀路径或完整路径，默认完整路径',
      description_en:
        'Global Configuration, Path display mode, which can be a prefix path or a full path. The default value is a full path.',
    },
    {
      attribute: 'lvSeparator',
      type: 'string | TemplateRef',
      default: 'null',
      description: `分隔符自定，支持字符串或模板。`,
      description_en: `The separator is self-defined and supports string or template.`,
    },
  ],
  event: [],
};
